<template>
    <div style="scroll-behavior: smooth;"> 
    <!-- // scroll-behavior: smooth : 平滑滚动 一定要写  不然锚点很生硬  
    // 但如果是用饿了么那样用js实现，就不需要这个样式的帮助 -->
        <div v-show="iftop" class="totop" @click="toTop">
            <div class="top">返回 <p> 顶部</p></div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'totop',
    props: { iftop: { type: Boolean } },
    mounted() { //监听scroll方法
        window.addEventListener('scroll', this.handleScroll)
    },
    beforeDestroy() { //及时释放
        window.removeEventListener('scroll', this.handleScroll)
    },
    methods: {
        handleScroll() {
            let iftopChild = window.pageYOffset > 1000 ? true : false
            this.$emit('handleScroll', iftopChild)
        },
        toTop() {
            window.scrollTo(0, 0)
        }
    }
}
</script>
<style lang="less" scoped>
    .top{
        font-size: 14px;
        position: fixed;
        color: #fff;
        border-radius: 50%;
        padding: 10px;
        background-color: rgba(243, 114, 9, 0.952);
        right: 20px;
        bottom: 60px  
    }

</style>